<template>
  <div class="market">
    <div id="chartStack" class="chartStack"></div>
  </div>
</template>

<script setup>
import { getQuoteInfo } from "@/apis/quoteInfo/quoteInfo.js";
import { color } from "echarts";
import { ref } from "vue";

import { inject, onMounted } from "vue";
import generateDateArray from "@/utils/days.js";



onMounted(() => {
  let $echarts = inject("echarts");
  console.log($echarts);
  let myChart = $echarts.init(document.getElementById("chartStack"));
  const day = ref(generateDateArray(7))

  myChart.setOption({
    title: {
      text: "(元/斤)",
      textStyle: {
        fontSize: "oblique",
        color: "#fff",
      },
      top: 18,
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: [
        {
          name: "白羽鹅",
          textStyle: {
            color: "#fff",
          },
        },
        {
          name: "马岗鹅",
          textStyle: {
            color: "#fff",
          },
        },
        {
          name: "五龙鹅",
          textStyle: {
            color: "#fff",
          },
        },
        {
          name: "狮头鹅",
          textStyle: {
            color: "#fff",
          },
        },
      ],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      data: day.value,
    },
    yAxis: {
      type: "value",
      max: 14,
      min: 5,
    },
    textStyle: {
      color: "#fff",
    },
    series: [
      {
        name: "白羽鹅",
        type: "line",
        // stack: 'Total',
        data: [7.7, 8, 7.3, 8.3, 8.9, 9.1, 8.5],
        areaStyle: {},
      },
      {
        name: "马岗鹅",
        type: "line",
        // stack: 'Total',
        data: [10.8, 10, 9.9, 10.3, 10.5, 11, 11.2],
        areaStyle: {opacity:1},
      },
      {
        name: "五龙鹅",
        type: "line",
        // stack: 'Total',
        data: [8, 8.4, 8.8, 8, 9.4, 9.9, 8.9],
        areaStyle: {
          opacity:1
        },
      },
      {
        name: "狮头鹅",
        type: "line",
        // stack: 'Total',
        data: [6.75, 7, 7.3, 6.5, 7.4, 7.7, 6.9],
        areaStyle: {},
      },
    ],
  });
  setInterval(() => {
    // dayData.value[0] +=
    generateDateArray(7)
    myChart.setOption({
      xAxis: {
        data: day.value,
      },
    });
  },10000)
});

// 数组分解子数组
function chunkArray(array, chunkSize) {
  const chunks = [];
  for (let i = 0; i < array.length; i += chunkSize) {
    chunks.push(array.slice(i, i + chunkSize));
  }
  return chunks;
}

// 分解后数组
const quoteInfoList = ref([]);

// 获取数据
const fetchQuoteInfo = async () => {
  const res = await getQuoteInfo();

  quoteInfo.value = res.data.data;

  quoteInfoList.value = chunkArray(quoteInfo.value, 5);
};

const quoteInfo = ref([]);

fetchQuoteInfo();
</script>

<style lang="less" scoped>
.market {
  width: 100%;
  height: 3.45rem;
  background-image: url(../assets/imgs/icon_hqbj_new.png);
  background-repeat: no-repeat;
  background-size: 100%;
  padding: 0.75rem 0.25rem 0.25rem;
  box-sizing: border-box;
  margin-top: 0.15rem;

  .market-content {
    height: 100%;
    /* padding-top: 10px; */
    box-sizing: border-box;
    overflow: scroll;
    position: relative;
    /* background-color: #ffcc00; */
    margin-top: 0.0625rem;

    .marck-text {
      color: #fff;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding: 0 0.25rem;

      // el-carousel {
      //   height: 1.25rem;
      // }
    }

    .marck-text p {
      padding: 0.125rem 0rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      /* background-color: #00ffff; */
      width: 100%;
      font-size: 0.2rem;
    }
  }
}

.chartStack {
  width: 100%;
  height: 100%;
}
</style>
